<%@ page contentType="text/html; charset=iso-8859-1" language="java" %>

<div>
    <table style="border: 1px solid black; width: 100%; height: 100%">
        <tr>
            <td>
                    <div style="text-align: center">
                        <img src="Graphic/Images/commentary/images.jpg"/>
                    </div>
                    <div style="text-align: center">
                        <span style="font-weight: bolder"> username </span>
                       <br/>
                        <span style="font-style: italic; font-size: 80%"> usergroup </span>
                        <br/>
                        <span style="font-style: oblique; font-weight: lighter"> date </span>
                    </div>
            </td>

            <td  style="width: 100%; height: 100%">
                <div style="float: left; border: 1px solid black; width: 99.8%; height: 80%">
                  Cogito ergo sum
                </div>
                <div style="clear: left"></div>

                <div style = "text-align: right">
                    <button type="button" onclick='document.getElementById("setCommentary").style.display="block"'>????????</button>
                </div>
            </td>
        </tr>


        <tr>
            <td colspan="2">
                <div style="display: none" id="setCommentary">
                    <hr size="1" width="100%">
                    <form>
                        <textarea id="Commentary" style="display:table-row; width: 99.5%; height: 100%" placeholder="??? ???????????"></textarea>
                        <div style="text-align: right">
                            <input type="submit" value="?????????"/>
                            <input type="button" value="??????" onclick='document.getElementById("setCommentary").style.display="none"; document.getElementById("Commentary").value=""'/>
                        </div>
                    </form>
                </div>
            </td>
        </tr>
    </table>
</div>